<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright (c) 2017-2021 Contributors to the Eclipse Foundation
  ~
  ~ See the NOTICE file(s) distributed with this work for additional
  ~ information regarding copyright ownership.
  ~
  ~ This program and the accompanying materials are made available under the
  ~ terms of the Eclipse Public License 2.0 which is available at
  ~ http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0
  ~ which is available at https://www.apache.org/licenses/LICENSE-2.0.
  ~
  ~ SPDX-License-Identifier: EPL-2.0 OR Apache-2.0
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div *ngIf="loading; else elseBlock">
    <winery-loader></winery-loader>
</div>

<ng-template #elseBlock>
    <winery-table *ngIf="plansApiData"
                  [title]="'Embedded Plans'"
                  [columns]="embeddedPlansColumns"
                  [data]="plansApiData"
                  [disableButtons]="!sharedData?.currentVersion?.editable"
                  [enableEditButton]="enableEditButton"
                  [enableIOButton]="true"
                  (cellSelected)="onCellSelected($event)"
                  (addBtnClicked)="onAddPlanType();"
                  (editBtnClicked)="onEditPlan($event);"
                  (removeBtnClicked)="onRemovePlan($event);"
                  (ioBtnClicked)="onEditPlanIOParameters($event);">
        <div class="button-group pull-right">
            <button type="button" class="btn btn-primary"
                    (click)="onGeneratePlans()">
                Generate Plans
            </button>
        </div>
    </winery-table>
    <winery-table *ngIf="linkedPlans"
                  [title]="'Linked Plans'"
                  [columns]="linkedPlansColumns"
                  [data]="linkedPlans"
                  [disableButtons]="true">
    </winery-table>
</ng-template>

<winery-modal bsModal #addPlanModal="bs-modal" [modalRef]="addPlanModal">
    <winery-modal-header [title]="'Add Plan'">
    </winery-modal-header>
    <winery-modal-body>
        <form #addPlanFrom="ngForm" id="addPlanForm">
            <div class="form-group">
                <label class="control-label" for="key">Name</label>
                <input #propName="ngModel"
                       id="key"
                       class="form-control"
                       type="text"
                       name="key"
                       autocomplete=off
                       required
                       [(ngModel)]="newPlan.name"/>

                <div *ngIf="propName.errors && (propName.dirty || propName.touched)"
                     class="alert alert-danger">
                    <div [hidden]="!propName.errors.required">
                        Name is required
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label" for="planType">Type</label>
                <ng-select id="planType" [items]="planTypes" [active]="[selectedPlanType]"
                           (selected)="planTypeSelected($event)"></ng-select>
                <button class="btn btn-info btn-xs" (click)="refreshPlanTypes()">Refresh</button>
                <button class="btn btn-info btn-xs" [routerLink]="['/admin/plantypes']">Manage</button>
            </div>

            <div class="form-group">
                <label class="control-label" for="interfaceName">Interface</label>
                <input #interfaceName="ngModel"
                       id="interfaceName"
                       class="form-control"
                       type="text"
                       name="interfaceName"
                       autocomplete=off
                       required
                       [(ngModel)]="interfaces.id"/>

                <div *ngIf="interfaceName.errors && (interfaceName.dirty || interfaceName.touched)"
                     class="alert alert-danger">
                    <div [hidden]="!interfaceName.errors.required">
                        Interface is required
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label" for="operationName">Operation</label>
                <input #operationName="ngModel"
                       id="operationName"
                       class="form-control"
                       type="text"
                       name="operationName"
                       autocomplete=off
                       required
                       [(ngModel)]="interfaces.operations"/>

                <div *ngIf="operationName.errors && (operationName.dirty || operationName.touched)"
                     class="alert alert-danger">
                    <div [hidden]="!operationName.errors.required">
                        Operation is required
                    </div>
                </div>
            </div>


            <div class="form-group">
                <label class="control-label" for="planLanguage">Language</label>
                <ng-select id="planLanguage" [items]="planLanguages" [active]="[selectedPlanLanguage]"
                           (selected)="planLanguageSelected($event)"></ng-select>
                <button class="btn btn-info btn-xs" (click)="refreshPlanLanguages()">Refresh</button>
                <button class="btn btn-info btn-xs" [routerLink]="['/admin/planlanguages']">Manage</button>
            </div>

            <div [hidden]="!showArchiveUpload" class="form-group">
                <label for="uploader">Archive</label>
                <winery-uploader #uploader id="uploader"
                                 [uploadUrl]="uploaderUrl"
                                 (onFileDropped)="onFileDropped($event);"
                                 [uploadImmediately]="false"
                                 [uploadMethod]="'PUT'"
                                 [isEditable]="sharedData?.currentVersion?.editable"
                                 (onSuccess)="getPlanTypesData()"
                                 (onError)="handleError($event)">
                </winery-uploader>
            </div>
            Be aware that existing interfaces and operations may be overriden!
        </form>
    </winery-modal-body>
    <winery-modal-footer
        (onOk)="addPlan()"
        [closeButtonLabel]="'Cancel'"
        [okButtonLabel]="'Add'"
        [disableOkButton]="!addPlanFrom?.form.valid || !fileDropped">
    </winery-modal-footer>
</winery-modal>

<ng-template #ioModal>
    <winery-modal-header [modalRef]="ioModalRef" [title]="'Edit Parameters'">
    </winery-modal-header>
    <winery-modal-body>
        <winery-io-parameter [inputParameters]="newPlan.inputParameters"
                             [outputParameters]="newPlan.outputParameters">
        </winery-io-parameter>
    </winery-modal-body>
    <winery-modal-footer
        [modalRef]="ioModalRef"
        (onOk)="editPlan()"
        [closeButtonLabel]="'Cancel'"
        [okButtonLabel]="'Save'">
    </winery-modal-footer>
</ng-template>

<winery-modal bsModal #confirmDeleteModal="bs-modal" [modalRef]="confirmDeleteModal">
    <winery-modal-header [title]="'Delete Property'">
    </winery-modal-header>
    <winery-modal-body>
        <p *ngIf="elementToRemove != null">
            Do you want to delete the Element <span style="font-weight:bold;">{{ elementToRemove.name }}</span>?
        </p>
    </winery-modal-body>
    <winery-modal-footer (onOk)="deletePlan();"
                         [closeButtonLabel]="'Cancel'"
                         [okButtonClass]="'btn-danger'"
                         [okButtonLabel]="'Delete'">
    </winery-modal-footer>
</winery-modal>

<winery-modal bsModal #confirmPlanGeneration="bs-modal" [modalRef]="confirmPlanGeneration">
    <winery-modal-header [title]="'Generate Plans'"></winery-modal-header>
    <winery-modal-body>
        <p>Do you want to generate plans for your Service Template?<br>Existing plans may get overridden.</p>
    </winery-modal-body>
    <winery-modal-footer (onOk)="generatePlans()" [closeButtonLabel]="'Cancel'"
                         [okButtonLabel]="'Generate'"></winery-modal-footer>
</winery-modal>
